<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<!-- 导入vue -->
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<!-- 导入vue router -->
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
	</head>

	<body>
		<div id="app">
			<!-- router-link 是vue中提供的标签，默认会被渲染为a标签 -->
			<!-- to 属性默认会被渲染为href属性 -->
			<!-- to 属性的值默认会被渲染为#开头的hash地址 -->
			<router-link to="/user">user</router-link>
			<router-link to="/register">register</router-link>
			<router-link :to="{name:'login',params:{userName:'edison'}}"
				>命名路由，跳转到login</router-link
			>
			<button @click="changeRouter">点我</button>
			<!-- 动态路由匹配 -->
			<router-link to="/login/:userName">login</router-link>
			<!-- 路由填充位也叫路由占位符 -->
			<!-- 将来通过路由规则匹配到的组件，将会被渲染到 router-view 所在的位置 -->
			<router-view></router-view>
		</div>

		<script>
			const User = {
				template: '<h1>user</h1>'
			}
			const Register = {
				// template的内容可以使用引号包裹，也可以使用``包裹
				template: `
    <div>
      <h1>register</h1>
      <hr/>
      <router-link to='/register/tab1'>tab1</router-link>  
      <router-link to='/register/tab2'>tab2</router-link>  

      <router-view></router-view>
    </div>
  `
			}
			// 创建子级路由模板
			const Tab1 = {
				template: '<h3>tab1</h3>'
			}
			const Tab2 = {
				template: '<h3>tab2</h3>'
			}
			const Login = {
				// props:true,
				// 使用props接收路由参数
				// props: ['uname', 'age'],
				name: 'login',
				props: ['age', 'userName'],
				template: '<h1>login component {{age+userName}}</h1>'
			}
			// 创建路由实例对象
			let router = new VueRouter({
				// 创建路由规则
				routes: [
					// 每一个路由规则都是一个配置对象，至少包含path和component属性
					// path：当前路由规则匹配的hash值
					// component：当前路由规则所有展示的组件
					{
						path: '/',
						redirect: '/user'
					},
					{
						path: '/user',
						component: User
					},
					{
						path: '/register',
						component: Register,
						children: [
							{
								path: '/register/tab1',
								component: Tab1
							},
							{
								path: '/register/tab2',
								component: Tab2
							}
						]
					},
					{
						name: 'login',
						path: '/login/:userName',
						component: Login,
						// 如果props设置为true，route.params将会被设置为组件属性
						// props: true
						// 如果props设置为对象，它将会被按原样设计为组件属性
						// props: {
						// 	uname: 'edison',
						// 	age: 23
						// }
						// 如果props是一个函数，那么这个函数接收route对象为自己的形参
						props: (route) => ({
							age: 20,
							userName: route.params.userName
						})
						// props: function (route) {
						// 	return {
						// 		age: 20,
						// 		userName: route.params.userName
						// 	}
						// }
					}
				]
			})
			// 创建 vm 实例
			const vm = new Vue({
				el: '#app',
				router,
				data: {},
				mounted() {
					console.log(this.$router)
					console.log(this.$route)
				},
				methods: {
					changeRouter() {
						// this.$router.push('/register')
						// this.$router.replace('/register')
						this.$router.go(1)
					}
				}
			})
		</script>
	</body>
</html>
